<style>
  body {
    background: #eee;
  }

  div {
    position: relative;
    margin: 50px auto;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    /* // border:1px solid deeppink;   */
    background-color: deeppink;
    line-height: 120px;
    text-indent: 5px;
  }

  /* 可以看到 CSS 代码，主要 polygon(0 0, 0 100px, 100px 100px, 0 0) 中，其实是一系列路径坐标点，整个图形就是由这些点围起来的区域。*/
  /* 这里的坐标轴同canvas */
  div::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-clip-path: polygon(0 0, 0 100px, 100px 100px, 0 0);
    background: #fff;
    border: 1px solid #333;
    /* transform: translateX(-120px); */
    animation: move 5s infinite linear;
  }

  div::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-clip-path: polygon(100px 99px, 100px 0, 1px 0, 100px 99px);
    background: #fff;
    border: 1px solid #333;
    /* transform: translateX(120px); */
    animation: move 5s infinite linear;
  }

  @keyframes move {
    40% {
      transform: translateX(0px);
    }

    100% {
      transform: translateX(0px);
    }
  }
</style>

<div></div>